<!--
 * @Author: 肖芬芳 10547202+xiao-fenfang@user.noreply.gitee.com
 * @Date: 2022-07-20 08:52:15
 * @LastEditors: 肖芬芳 1911683843@qq.com
 * @LastEditTime: 2022-12-13 16:23:09
 * @FilePath: \vue-api-serverc:\Users\Administrator\Desktop\vite-project\src\components\table\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!-- row-key 增强表格的渲染，使展开列数据重新渲染后不会自动闭合 -->
  <el-table :data="tableData" row-key="_id" stripe border style="width: 100%" max-height="65vh">
    <el-table-column v-if="showExpand" label="查看权限" width="100" type="expand">
      <template #default="scope">
        <slot name="roleExpand" :slotval="scope.row">
        </slot>
      </template>
    </el-table-column>
    <el-table-column label="序号" type="index" width="150" align="center" />
    <el-table-column v-for="(item, index) in tableTitle" :prop="item.value" :key="index" :label="item.label"
      align="center">
      <!-- 作用域插槽，scope获取表格的行内数据 -->
      <template #default="scope">
        <slot v-if="item.slotname" :name="item.slotname" :slotval="scope.row">
          <el-switch v-if="item.switch" v-model="scope.row[item.value]" active-color="#409eff" inactive-color="#DCDFE6"
            :active-value="1" :inactive-value="0" @change="changeStatus($event, scope.row._id)" />
        </slot>
      </template>
    </el-table-column>
  </el-table>

  <div class="page-box">
    <div class="demo-pagination-block">
      <el-pagination v-model:current-page="pageInfo.currentPage" v-model:page-size="pageInfo.pageSize"
        :page-sizes="[10, 20, 50, 100]" :small="small" :disabled="disabled" :background="background"
        layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.totalCount" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" @prev-click="prevClick" @next-click="nextClick" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
// const props = defineProps({
//   tableTitle: {
//     type: Array,
//     default: () => [],
//   },
//   tableData: {
//     type: Array,
//     default: () => {
//       return [{}];
//     },
//   },
//   pageInfo: {
//     type: Object,
//     default: () => { },
//   },
//   showExpand:{
//     type:Boolean,
//     default:()=>false
//   }
// });

interface Props {
  tableTitle: any;
  tableData:any;
  pageInfo: any;
  showExpand:Boolean;
}

const props = withDefaults(defineProps<Props>(), {});


const small = ref(true);
const background = ref(true);
const disabled = ref(false);

const $emit = defineEmits([
  "changeStatus",
  "handleSizeChange",
  "handleCurrentChange",
  "prevClick",
  "nextClick"
]);
const changeStatus = function (val: boolean, id: string) {
  if (!id) {
    return   //解决vue3中，switch组件自动执行chang方法的bug
  }
  $emit("changeStatus", id);
};


const handleSizeChange = (pageSize: number) => {
  $emit("handleSizeChange", pageSize);
};

const handleCurrentChange = (currentPage: number) => {
  $emit("handleCurrentChange", currentPage);
};

const prevClick = (currentPage: number) => {
  $emit("prevClick", currentPage)
}

const nextClick = (currentPage: number) => {
  $emit("nextClick", currentPage)
}
</script>

<style lang="scss">
.el-table {
  width: 100%;
  height: 65vh;
  border-bottom: 1px solid rgb(235, 238, 245);
  margin-top: 20px;
}

.page-box {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-top: 30px;
}
</style>